<template>
	<div id="app">
	  <el-row>
	    <el-col :span="12">
			 <el-card class="box-card">
				 <div slot="header" class="login-title">
				    <span><i class="el-icon-s-home"></i>欢迎您登录</span>
				 </div>
				 <el-form ref="loginForm" :rules="loginRules" :model="loginForm" label-width="80px" label-position="left">
				   <el-form-item label="用户名" prop="name">
				     <el-input v-model="loginForm.name" prefix-icon="el-icon-user" size="small" clearable></el-input>
				   </el-form-item>
				   <el-form-item label="密码" prop="password">
					  <el-input type="password" prefix-icon="el-icon-lock" show-password v-model="loginForm.password" size="small" autocomplete="off"></el-input>
				   </el-form-item>
				   <el-form-item>
					   <el-button type="primary" @click="loginHandler('loginForm')">登&nbsp;&nbsp;录</el-button>
					   &nbsp;&nbsp;&nbsp;&nbsp;
					   <el-button type="danger" @click="reset('loginForm')">重&nbsp;&nbsp;置</el-button>
				   </el-form-item>
				 </el-form>
			 </el-card>
		  </el-col>
	  </el-row>
	</div>
</template>

<script>
	import { login } from "@/api/login";
	import { setToken,setUser } from "@/utils/auth.js";
	import { Notification, MessageBox, Message } from 'element-ui'
	export default {
		data() {
		  return {
			loginForm: {
			  name: '',
			  password: ''
			},
			loginRules: {
			  name: [
				{ required: true, message: '请输入用户名', trigger: 'blur' },
				{ min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
			  ],
			  password: [
				{ required: true, message: '请输入密码', trigger: 'blur' },
				{ min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
			  ]
			},
			redirect: undefined
		  }
		},
		methods: {
			loginHandler(formName){
			  this.$refs[formName].validate((valid) => {
				if (valid) {
				  login(this.loginForm.name,this.loginForm.password).then(res=>{
					  if(res.data.code === 0){//登录成功
						  setToken(res.data.token)
						  setUser(res.data.userinfo.userName) //保存用户
						  //调转到原来的页面
						  this.$router.push({ path: this.redirect || "/" });
					  }else{
						  //提示错误
						  Notification.error({
						  	title: res.data.msg
						  })
					  }
					  
				  }).catch(error => {
					  Notification.error({
					  	title: '系统异常'
					  })
				  })
				} else {
				  console.log('error submit!!');
				  return false;
				}
			  });
			},
			reset(formName){
			  this.$refs[formName].resetFields();
			}
		},
		watch: {
		  $route: {
		    handler: function(route) {
		      this.redirect = route.query && route.query.redirect;
		    },
		    immediate: true
		  }
		}
	}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  display: flex;
  align-items:center;
  justify-content:center;
  margin-top: 10%;
}

.box-card {
    width: 350px;
 }
 .el-card__header {
     padding: 18px 20px;
     border-bottom: 1px solid #EBEEF5;
     box-sizing: border-box;
	 background-color: #409EFF;
	 color: white;
 }
 .login-title{

 }
</style>
